<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="main" style="width: 500px;height:350px;margin-left: 10px;">

    </div>
    <script type="text/javascript">

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }

        window.onload = function () {
            var id = getQueryVariable("id");

            $.ajax({
                type: 'get',
                url: 'http://localhost:8080/equipment/selectOneById/' + id,
                dataType: 'json',
                success: function (data) {
                    console.log(data.data.list)
                    initCharts(data);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
        function initCharts(data) {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            var concentrations = [];
            var times = [];
            var type = '';

            for (var i = 0; i < data.data.list.length; i++) {
                concentrations.push(data.data.list[i].concentration.replace('%', ''));
                times.push(data.data.list[i].createTime)
                type = data.data.list[i].type;
            }

            option = {
                title: {
                    text: type + '的浓度值变化',
                    top: '7%'
                },
                grid: {
                    y: 110,
                    left: '12%'
                },
                tooltip: {
                    trigger: 'axis',
                    
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    },
                    top: '10%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: times
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                series: [{
                    data: concentrations,
                    type: 'line',
                    smooth: true,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }]
            };

            option && myChart.setOption(option);
        }


    </script>
</body>

</html>